<template>
  <!--第二步:准备一个容器,wh,否则看不见  -->
  <div class="charts" ref="charts"></div>
</template>

<script>
//第一步:引入插件echarts
import * as echarts from "echarts";
export default {
  name: "",
  //页面中的结构加载完毕,可以获取容器节点
  mounted() {
    //初始化echarts实例
    let mycharts = echarts.init(this.$refs.charts);
    //配置项
    let option = {
      //布局调整
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
      xAxis: {
        show: false,
        type: "category", //折线图在x轴上均匀分布
        boundaryGap: false, //两边步留白
      },
      yAxis: {
        show: false,
      },
      series: {
        type: "line",
        data: [0, 34, 47, 21, 9, 54, 28, 32, 31, 17, 28, 39, 47],
        //平滑曲线
        smooth: true,
        //拐点不需要
        symbol: "none",
        //填充颜色
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "blue", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        //线条的颜色
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "yellow", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    };
    //设置配置项
    mycharts.setOption(option);

    //当浏览器的窗口发生变化的时候监听事件---DOM2级事件
    window.addEventListener("resize",()=>{
       //图表自适应
       mycharts.resize();
    });
  },
};
</script>

<style scoped lang="scss">
.charts {
  width: 100%;
  height: 100%;
}
</style>
